Guide Interactif des Formulaires HTML

Bases du Formulaire

⚠️ La sécurisation des formulaires est cruciale ! Toujours valider les données côté serveur.

Structure de base

<form action="/submit" method="post" enctype="multipart/form-data">
  <!-- Les champs du formulaire -->
  <button type="submit">Envoyer</button>
</form>

Le formulaire définit comment et où les données seront envoyées.

GET Méthode GET

• Données ajoutées à l'URL
• Visible dans l'historique
• Limité en taille (2048 caractères)
• Pour récupérer des données

<form action="/search" method="get">
  <input type="search" name="q">
</form>

POST Méthode POST

• Données dans le corps de la requête
• Non visible dans l'URL
• Pour envoyer des données sensibles
• Pour modifier des données

<form action="/login" method="post">
  <input type="password" name="password">
</form>

Attributs importants du form :

Attribut	Description	Exemple
action	URL où les données seront envoyées	action="/api/submit"
method	GET ou POST (méthode d'envoi)	method="post"
enctype	Type d'encodage des données	enctype="multipart/form-data"
novalidate	Désactive la validation HTML5	novalidate
autocomplete	Active/désactive l'autocomplétion	autocomplete="off"

Types d'inputs essentiels

Text

Input basique pour tout type de texte court.

<input 
  type="text"
  name="username"
  placeholder="Entrez votre nom"
  minlength="3"
  maxlength="50"
  required
>

Password

Masque automatiquement les caractères saisis.

<input 
  type="password"
  name="password"
  minlength="8"
  autocomplete="current-password"
  required
>

Email

Validation automatique du format email + clavier email sur mobile.

<input 
  type="email"
  name="email"
  placeholder="exemple@domaine.com"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  required
>

Textarea

Pour les textes longs, redimensionnable par l'utilisateur.

<textarea
  name="message"
  rows="4"
  cols="50"
  maxlength="500"
  placeholder="Votre message..."
></textarea>

Types d'inputs spécialisés

Number

Pour les valeurs numériques uniquement.

<input 
  type="number"
  name="quantity"
  min="0" 
  max="100"
  step="1"
>

Tel

Affiche le clavier téléphonique sur mobile.

<input 
  type="tel"
  name="phone"
  pattern="[0-9]{10}"
  placeholder="06 12 34 56 78"
>

Date

Sélecteur de date natif.

<input 
  type="date"
  name="birthday"
  min="1900-01-01"
  max="2024-12-31"
>

Time

Sélecteur d'heure natif.

<input 
  type="time"
  name="meeting_time"
>

File

Pour l'upload de fichiers.

<input 
  type="file"
  name="document"
  accept=".pdf,.doc,.docx"
  multiple
>

Color

Sélecteur de couleur natif.

<input 
  type="color"
  name="theme_color"
  value="#ff0000"
>

Éléments de sélection

Select

Liste déroulante avec groupes d'options.

<select name="options" required>
  <option value="">Choisissez...</option>
  <optgroup label="Groupe 1">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </optgroup>
</select>

Radio Buttons

Option 1 Option 2

Pour sélectionner une seule option parmi plusieurs.

<div class="radio-group">
  <label>
    <input type="radio" name="choice" value="1">
    Option 1
  </label>
  <label>
    <input type="radio" name="choice" value="2">
    Option 2
  </label>
</div>

Checkboxes

Sport Musique

Pour sélectionner plusieurs options.

<div class="checkbox-group">
  <label>
    <input type="checkbox" name="interests[]" value="sport">
    Sport
  </label>
  <label>
    <input type="checkbox" name="interests[]" value="music">
    Musique
  </label>
</div>

Validation des formulaires

La validation côté client n'est qu'une première étape. La validation côté serveur est indispensable !

Attributs de validation

Attribut	Description	Exemple
required	Champ obligatoire	required
pattern	Motif RegExp	pattern="[A-Za-z]{3}"
minlength/maxlength	Longueur du texte	minlength="3"
min/max	Valeurs numériques	min="0" max="100"

Exemple de validation

<form id="demo-form" novalidate>
  <input  type="text" required minlength="3" maxlength="20" pattern="[A-Za-z0-9]+" >
  <input type="email" required>
</form>

Bonnes Pratiques

Recommandations générales :

✓ Toujours associer les labels aux inputs avec for/id
✓ Grouper les champs liés avec fieldset et legend
✓ Utiliser des noms de champs explicites
✓ Ajouter des messages d'erreur clairs
✓ Inclure des placeholders pertinents
✓ Penser à l'accessibilité (ARIA)
✓ Valider côté client ET serveur
✓ Utiliser autocomplete quand c'est pertinent

Structure recommandée

Informations personnelles

Nom complet : Minimum 2 caractères

<fieldset>
  <legend>Informations personnelles</legend>
  <div class="form-group">
    <label for="name">Nom complet :</label>
    <input 
      type="text"
      id="name"
      name="fullname"
      required
      aria-required="true"
      aria-label="Entrez votre nom complet"
      placeholder="Jean Dupont"
    >
    <span class="error" role="alert"></span>
  </div>
</fieldset>

Points de vigilance :

⚠️ Ne jamais faire confiance aux données utilisateur
⚠️ Ne pas stocker de données sensibles en clair
⚠️ Toujours valider et assainir les données côté serveur
⚠️ Protéger contre les attaques XSS et CSRF
⚠️ Limiter la taille des fichiers uploadés
⚠️ Utiliser HTTPS pour les données sensibles

Accessibilité

Attributs ARIA essentiels :

Attribut	Utilisation
aria-label	Description de l'élément
aria-required	Indique un champ obligatoire
aria-invalid	Signale une erreur
aria-describedby	Lie une description à un champ

Exemple accessible

Champ avec description : Cette description est lue par les lecteurs d'écran

<label for="demo-input">Champ avec description :</label>
<input 
  type="text" 
  id="demo-input"
  aria-describedby="input-help"
  aria-required="true"
>
<span id="input-help" class="input-description">
  Cette description est lue par les lecteurs d'écran
</span>